<script lang="ts" setup>
import { ref } from 'vue';
import { icons } from './icons';

const selectValue = ref('');

// const localIcons = ['custom-icon', 'activity', 'at-sign', 'cast', 'chrome', 'copy', 'wind'];
import { getLocalIcons } from '@/utils/icon';
const localIcons = getLocalIcons();
console.log(localIcons);
</script>

<template>
  <div class="h-full">
   <ElCard header="本地图标" class="mt-10px card-wrapper" style="margin-bottom: 10px;">
      <div class="grid grid-cols-10">
        <div v-for="(fileName, index) in localIcons" :key="index" class="mt-5px flex-x-center">
          <SvgIcon :local-icon="fileName" class="text-30px text-primary" />
        </div>
      </div>
    </ElCard>

    <ElCard header="Icon组件示例" class="card-wrapper">
      <div class="grid grid-cols-10">
        <template v-for="item in icons" :key="item">
          <div class="mt-5px flex-x-center">
            <SvgIcon :icon="item" class="text-30px" />
          </div>
        </template>
      </div>
      <div class="mt-50px">
        <h1 class="mb-20px text-18px font-500">Icon图标选择器</h1>
        <CustomIconSelect v-model:value="selectValue" :icons="icons" />
      </div>
      <template #footer>
        <WebSiteLink label="iconify地址：" link="https://icones.js.org/" class="mt-10px" />
      </template>
    </ElCard>
 
  </div>
</template>

<style scoped></style>
